import styles from "./Styles.less"
import { Table, Popconfirm, Pagination, Divider } from "antd"
import YQModalForm from "./ModalForm"
import { Link } from "react-router-dom"
import { currentBasePath } from '../../constant'

const TableTest = ({ tableData, operation, pagination }) => {

    //表单内函数操作动作(管理、编辑、删除)
    const { editFun, delFun } = operation

    //定义列表数据的唯一Key值
    const rowKey = (record) => {
        return record.pub_code_id
    }

    const columns = [{
        title: '状态码',
        dataIndex: 'code',
    }, {
        title: '说明',
        dataIndex: 'msg',
    }, {
        title: '性质',
        dataIndex: 'code_nature',
        render: (text) => {
            return (
                <div>
                    <a style={{ color: (text === 1) ? "green" : "red" }}>
                    {(text === 1) ? "成功": "失败"}</a>
                </div>
            )
        },
    }, {
        title: '创建者',
        dataIndex: 'creator',
    }, {
        title: '更新者',
        dataIndex: 'updater',
    }, {
        title: '更新日期',
        dataIndex: 'update_time',
    }, {
        title: '操作',
        align: "right",
        width: "15%",
        render: (record) => {
            //路由参数
            const { code } = record
            return (
                <div style={{float: "right"}}>
                    <Link to={`${currentBasePath}/state-code/details/${code}`}>管理</Link>
                        <Divider type="vertical" />
                        <YQModalForm record={{...record}} onOk={editFun.bind(null, record)}>
                            <a>修改</a>
                        </YQModalForm>
                    <Divider type="vertical" />
                    <Popconfirm title="是否删除该项？" okText="确认" cancelText="取消"
                        onConfirm={delFun.bind(null, record)}>
                        <a>删除</a>
                    </Popconfirm>
                </div>
            )
        },
    }]

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    }


    return (
        <div className={styles.myDivStyle}>
            <Table className={styles.antMineStyle}
                rowSelection={rowSelection}
                columns={columns}
                dataSource={tableData}
                bordered={true}
                rowKey={rowKey}
                pagination={false}
                locale={{
                    emptyText: '没有查询到数据，请检查',
                }}
            />
            <div>
                <hr style={{ width: "100%", backgroundColor: "#cccccc", margin: "0 auto", padding: 0, border: "none", height: 1 }}></hr>
                <div className={styles.myPaginationStyle}>
                    <Pagination
                        showSizeChanger
                        onChange={pagination.onChange}  //改变页数 事件
                        onShowSizeChange={pagination.onShowSizeChange}  //改变页大小 事件
                        defaultPageSize={20}
                        defaultCurrent={Number(pagination.defaultCurrent)}
                        total={Number(pagination.total)}
                        showTotal={() => {
                            return '共 ' + Number(pagination.total) + ' 条数据' 
                        }}
                        />
                </div>
            </div>
        </div>
    )
}


export default TableTest